<template>
  <div class="content" :class="pageClass">
    <ul>
      <li class="flexCC" v-for="(item, index) in dataList">
        <div class="icon" v-if="pageIndex === 1" :class="item.gameName | martialLogo"></div>
        <div class="lists">{{item.gameName}}</div>
        <div class="text" v-if="pageIndex !== 1">{{item.nickName}}</div>
        <div class="lilv">{{item.listProfit}}</div>
      </li>
    </ul>
    <div class="xiangqing" v-if="pageIndex !== 3 && dataList.length > 0">
      <a href="javascript:;" @click.stop.prevent="goDetail">
        <img src="~assets/images/xiangqingBtn.png" alt="">
      </a>
    </div>
  </div>
</template>

<script>
import Constant from 'common/constant'
export default {
  props: {
    pageClass: {
      type: String
    },
    pageIndex: {
      type: Number
    },
    dataList: {
      type: Array
    }
  },
  methods: {
    goDetail () {
      this.maidian('23013')
      if (this.pageIndex === 1) {
        window.location.href = 'gtjayyz://jumpfunc?funid=11007&pagename=team-game/game-detail&gameId=' + Constant.GLDH_ID + '&gameName=股林大会'
      } else if (this.pageIndex === 2) {
        window.location.href = 'gtjayyz://jumpfunc?funid=11007&pagename=team-game/team-detail&gameId=' + this.dataList[0].gameId + '&gameTitle=股林大会'
      }
    },
    maidian (tdId, kv) {
      kv = kv || {}
      let TDAPP = window.TDAPP
      TDAPP.onEvent(tdId, '', kv)
      TDAPP.send()
    }
  },
  filters: {
    martialLogo (gameName) {
      switch (gameName) {
        case '少林派' : return 'shaolin'
        case '武当派' : return 'wudang'
        case '华山派' : return 'huashan'
        case '逍遥派' : return 'xiaoyao'
        default : return ''
      }
    }
  }
}
</script>

<style scoped>
  .content.page1 {
    height: 800px;
  }
  .content.page2 {
    height: 830px;
  }
  .content.page3 {
    height: 710px;
  }
  .yingxiong .content.page1 ul {
    width: 400px;
  }
  .yingxiong .content.page2 ul,.yingxiong .content.page3 ul {
    width: 390px;
  }
  .content .flexCC {
    justify-content: space-between;
  }
  .content.page2 .flexCC,.content.page3 .flexCC {
    height: 51px;
  }
  .content.page2 .lists,.content.page3 .lists {
    width: 25%;
    height: 100%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content .text {
    flex: 45%;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .content.page2 .lilv,.content.page3 .lilv{
    flex: 30%;
    text-align: center;
  }
  .content .xiangqing {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
  }
</style>
